<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title></title>
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <link href="../css/mui.min.css" rel="stylesheet" />
  <link rel="stylesheet" type="text/css" href="../fonts/iconfont.css" />
  <link rel="stylesheet" type="text/css" href="../css/timecheck.css" />
  <script>
    document.documentElement.style.fontSize = document.documentElement.clientWidth / 6.4 + 'px';
  </script>
 <style>
   .titleDiv{
     width: 100%;
     border-top:1px solid #ccc ;
     background-color: white;
     overflow: hidden;
   }
   .titleDiv p{
     height: 0.5rem;
     line-height: 0.5rem;
     color:black;
     font-size: 0.2rem;
   }
   .titleDiv>p:first-child{
     float: left;
     margin:0 0 0 0.2rem;
   }
   .titleDiv>p:last-child{
     float: right;
     margin: 0 0.2rem 0 0;
   }

   .storeChoose{
     width:100%;
     /*border: 1px solid #ccc;*/
     font-size: 0.22rem;
     text-align: center;
     overflow: hidden;
     padding: 0.25rem 3%;
     /*background-color:#F7F7F7;*/
   }
   .storeChoose span{
     display: inline-block;
     width: 33%;
     padding: 0.06rem 0;
     float: left;
     border: 1px solid #ccc;
     font-size: 0.2rem;
     background-color:white;
   }
   .storeChoose span:nth-child(2){
     border-right: none;
     border-left: none;
   }
   .storeChoose .default{
     background-color: #ccc;
   }
   /*销售总览*/
   .salesPandect{
     width: 100%;
   }
   .dataHeader {
     width: 100%;
     /*background-color: white;*/
     padding: 0.2rem 0;
     overflow: hidden;
   }
   .setMeal ,.openCard{
     background-color: #F9F9F9;
     width: 48%;
     float: left;
     border-radius: 0.2rem;
     text-align: center;
     padding: 0.05rem 0;
   }
   .setMeal{
     margin:0 2% 0 1%;
   }
   .setMeal p ,.openCard p{
     margin: 0.05rem 0 0;
     font-size: 0.22rem;
     color:black;
   }
   .setMeal>p:first-child ,.openCard>p:first-child{
     font-size: 0.26rem;
   }
   .setMeal>p:nth-child(2) ,.openCard>p:nth-child(2){
     font-size: 0.22rem;
   }
   .floatDiv{
     width: 100%;
     padding: 0.05rem 0.2rem ;
     overflow: hidden;
     margin-top: 0.1rem;
   }
   .floatDiv .floatItem{
     width: 50%;
     float: left;
   }
   .floatDiv>div:first-child{
     border-right: 1px solid #ccc;
   }
   .floatDiv .floatItem p{
     margin: 0 0 0.05rem 0;
   }


   table {
     font-size: 0.22rem;
     width: 100%;
     text-align: center;
     /*margin-top: 0.1rem;*/
     /*background-color: white*/
   }

   table tr td {
     padding: 0.1rem 0;
     height: 0.8rem;
     /*display: inline-block;*/
     /*line-height: 0.65rem;*/
   }
   table,
   tbody,td div{
     text-align: center;
     font-size: 0.2rem;
   }
   td span{
     display: inline-block;
     text-align: left;
     vertical-align: middle;
   }
   .table-box{
     width: 100%;
     font-size: 0.2rem;
     text-align: center;
     padding-bottom: 1rem;
   }
   .tab-head {
     width: 100%;
     background-color: #FFFFFF;
     line-height: 0.5rem;
   }
   .light {
     color: #8e8a8a;
   }
   .bglight {
     background-color: #FFFFFF;
   }


   .tableDiv{
     width: 100%;
     font-size: 0.22rem;
     background-color: #EEEEEE;
     padding-bottom: 1rem;
   }
   .tableItem{
     padding-top: 0.2rem;
   }
   .mealName{
     display: inline-block;
     width: 100%;
     height: 0.3rem;
     line-height: 0.32rem;
     background-color: white;
     color:#ED7D31;
     padding-left: 0.2rem;
     font-size: 0.2rem;
     position: absolute;
     bottom:0.05rem;
   }
   .triangle{
     display: inline-block;
     border-bottom: 0.3rem solid transparent;
     border-left: 0.3rem solid transparent;
     border-right: 0.3rem solid #EEEEEE;
     position: absolute;
     bottom:0.07rem;
     right: 3.8rem;
   }
   .titleData{
     width: 3.8rem;
     height: 0.3rem;
     line-height: 0.3rem;
     position: absolute;
     bottom:0.07rem;
     right: 0;
     background-color: #EEEEEE;
     text-align: right;
     font-size: 0.2rem;
   }
   .titleData span{
     display: inline-block;
     margin-right: 0.1rem;
   }
   .mealDetail{
     width: 100%;
     /*background-color: #F7F7F7;*/
     padding-top: 0.2rem;
     margin-top: 0.05rem
   }
   .mealDetail .name{
     width: 70%;
     margin: 0 auto;
     background-color: white;
     color:#ED7D31;
     text-align: center;
     padding: 0.05rem 0;
     border-radius: 0.3rem;

   }





 </style>
</head>

<body>
<div id="app" class="mui-content">
  <!--时间选择器-->
  <time-check :type="2" :names='names' :dateType="dateType" :leftdata="(localData.totleSaleMoney/100).toFixed(2)" :rightdata="66" leftunit="" rightunit="枚"  :actnum="actnum" :fromdate="fromDate" :todate='toDate' :top="top"></time-check>
  <!--ARPPU  收银台数量-->
  <div style="position: absolute;top:1.41rem;left: 0.9rem;">
    <img src="../images/Computer.png" style="width: 1.6rem" alt="">
  </div>
  <div class="titleDiv">
    <p>ARPPU:{{localData.totleArppu}}</p>
    <p>收银台数量:{{localData.cashierNumber}}台</p>
  </div>
  <!--选择框 1.销售总览 2.套餐分析 3.套餐详情 -->
  <div class="storeChoose">
    <span @click="choose(1,'chooseType')" :class="{default:chooseType ===1}" >销售总览</span>
    <span @click="choose(2,'chooseType')" :class="{default:chooseType ===2}" >套餐分析</span>
    <span @click="choose(3,'chooseType')" :class="{default:chooseType ===3}" >套餐详情</span>
  </div>
<!--数据展示-->
  <!--销售总览数据展示-->
  <div class="salesPandect" v-show="chooseType ===1">
    <div class="dataHeader" style="background-color: transparent">
      <!--套餐-->
      <div class="setMeal">
        <p> <strong>套餐</strong> </p>
        <p>实收：{{(localData.totleSaleMoney/100).toFixed(2)}}</p>
        <div class="floatDiv">
          <div class="floatItem">
            <p>购买人数</p>
            <p>{{localData.totleBuyNumber}}人</p>
          </div>
          <div class="floatItem">
            <p>销售笔数</p>
            <p>{{localData.totleSaleNumber}}笔</p>
          </div>
        </div>
      </div>
      <!--开卡-->
      <div class="openCard">
        <p> <strong>开卡</strong></p>
        <p >押金：{{(localData.openCardDeposit/100).toFixed(2)}}</p>
        <div class="floatDiv">
          <div class="floatItem">
            <p>开卡人数</p>
            <p>{{localData.openCardNumber}}人</p>
          </div>
          <div class="floatItem">
            <p>退卡人数</p>
            <p>{{localData.withdrawCardNumber}}人</p>
          </div>
        </div>
      </div>
    </div>
    <div class="storeChoose" style="background-color: white;margin-top: 0.2rem" >
      <div style="width: 100%;margin:0 17% ;overflow: hidden;">
        <span @click="choose(1,'chooseType3')" :class="{default:chooseType3 ===1}" >{{(dateType === 0 ? '近30天' : dateType ===1 ? '近12周' : '近12个月')}}销售金额</span>
        <span @click="choose(2,'chooseType3')" :class="{default:chooseType3 ===2}" style="border:1px solid #ccc" >{{(dateType === 0 ? '近30天' : dateType ===1 ? '近12周' : '近12个月')}}开卡人数</span>
      </div>
    </div>
    <!--销售额图形-->
    <div v-show="chooseType3 ===1" style="background-color: white;overflow: hidden;margin-top: 0.1rem">
      <div id="line-chart" style=" width: 6.4rem;;height:5rem;"></div>
    </div>
    <!--开卡人数图-->
    <div v-show="chooseType3 ===2" style="background-color: white;overflow: hidden;margin-top: 0.1rem">
      <div id="openCardChart" style="width: 6.4rem;height:5rem;"></div>
    </div>
    <!--table-->
    <div class="table-box">
      <table style="width: 100%">
        <tr class="tab-head ">
          <td style="width:20%">日期</td>
          <td style="width:15%" class="light">开卡人数</td>
          <td style="width:15%" class="light">退卡人数</td>
          <td style="width:15%" >购买人数</td>
          <td style="width:20%" >总销售额</td>
          <td style="width:15%">ARPPU</td>
        </tr>
        <tr v-for="(item,index) in dataList" :key="index"  :class="{bglight:index%2===1}">
          <td style="width:20%"><div>{{item.date}}</div></td>
          <td style="width:15%"><div><span class="light">{{item.openCardNumber}}</span></div></td>
          <td style="width:15%"><div><span class="light">{{item.withdrawCardNumber}}</span></div></td>
          <td style="width:15%"><div><span >{{item.buyNumber}}</span></div></td>
          <td style="width:20%"><div><span >{{(item.saleMeal/100).toFixed(2)}}</span></div></td>
          <td style="width:15%"><div><span>{{item.saleArppu}}</span></div></td>
        </tr>
      </table>
      <!--<p v-show="totalData.stores.length ===0 " style="width: 100%;text-align: center;height: 0.5rem;line-height: 0.8rem">-->
        <!--暂无数据-->
      <!--</p>-->
    </div>
  </div>

  <!--套餐分析数据展示-->
  <div v-show="chooseType ===2">
    <!--套餐-->
    <div class="dataHeader">
      <div class="setMeal">
        <p> <strong>当日基本套餐</strong> </p>
        <p  style="margin: 0"> <strong>{{(localData.basicSaleMoney/100).toFixed(2)}}</strong> </p>
        <!--单位元-->
        <p style="margin: 0">ARPPU：{{localData.basicArppu}}</p>
        <div class="floatDiv">
          <div class="floatItem">
            <p>购买人数</p>
            <p>{{localData.basicBuyNumber}}人</p>
          </div>
          <div class="floatItem">
            <p>销售笔数</p>
            <p>{{localData.basicSaleNumber}}笔</p>
          </div>
        </div>
      </div>
      <div class="openCard">
        <p> <strong>当日活动套餐</strong> </p>
        <p style="margin: 0"><strong>{{(localData.actSaleMoney/100).toFixed(2)}}</strong></p>
        <p style="margin: 0">ARPPU：{{localData.actArppu}}</p>
        <div class="floatDiv">
          <div class="floatItem">
            <p>购买人数</p>
            <p>{{localData.actBuyNumber}}人</p>
          </div>
          <div class="floatItem">
            <p>销售笔数</p>
            <p>{{localData.actSaleNumber}}笔</p>
          </div>
        </div>
      </div>
    </div>
    <!---->
    <div class="storeChoose" style="background-color: white;margin-top: 0.2rem" >
      <div style="width: 100%;margin:0 17% ;overflow: hidden;">
        <span @click="choose(1,'chooseType2')" :class="{default:chooseType2 ===1}" >套餐排行</span>
        <span @click="choose(2,'chooseType2')" :class="{default:chooseType2 ===2}" style="border:1px solid #ccc" >活动权重</span>
      </div>
    </div>
    <!--图形-->
    <div>
      <!--套餐排行图-->
      <div v-show="chooseType2 ===1" style="background-color: white;overflow: hidden;">
        <div id="mealranking" style="width: 6.4rem;height:5rem;"></div>
      </div>
      <!--活动权重图-->
      <div v-show="chooseType2 ===2" style="background-color: white;overflow: hidden">
        <div id="mealProportion" style="width: 6.4rem;height:5rem;"></div>
      </div>
    </div>
    <!--table-->
    <div class="tableDiv">
      <div class="tableItem"  v-for=" (item,index) in localData.mealJoinDetails" >
          <div style="position: relative;height: 0.5rem">
            <span class="mealName">{{item.name}}</span>
            <!--三角形-->
            <span class="triangle"></span>
            <div class="titleData">
              <span>{{item.buyNumber}}人</span>
              <span>{{item.saleNumber}}笔</span>
              <span>{{(item.saleMoney/100).toFixed(2)}}</span>
            </div>
          </div>
          <div class="table-box" style="padding-bottom: 0">
            <table style="width: 100%;margin-top: 0.05rem">
              <tr class="tab-head ">
                <td style="width:20%">商品项目</td>
                <td style="width:20%" class="light">售价</td>
                <td style="width:20%" class="light">购买人数</td>
                <td style="width:20%" class="light">销售笔数</td>
                <td style="width:20%" >销售额</td>
              </tr>
              <tr v-for="(item2,index2) in item.inJoinData" :key="index"  :class="{bglight:index2%2===1}">
                <td style="width:20%;position: relative;">
                  <img style="width: 0.2rem; position:absolute;top:0.28rem;left: 0.03rem " src="../images/liping.png" alt="">
                  <span style="display: inline-block;width: 1.4rem;font-size: 0.2rem;padding-left: 0.3rem" >{{item2.mealName}}</span>
                </td>
                <td style="width:20%"><div><span class="light">{{(item2.mealMoney/100).toFixed(2)  }}</span></div></td>
                <td style="width:20%"><div><span class="light">{{item2.buyNumber}}</span></div></td>
                <td style="width:20%"><div><span class="light">{{item2.saleNumber}}</span></div></td>
                <td style="width:20%"><div><span >{{(item2.saleMoney/100).toFixed(2)}}</span></div></td>
              </tr>
            </table>
            <p v-show="!item.inJoinData " style="width: 100%;text-align: center;height: 0.5rem;line-height: 0.8rem">
              暂无数据
            </p>
          </div>
      </div >

    </div>
    </div>

  <!--套餐详情数据展示-->
  <div v-show="chooseType ===3" style="padding-bottom: 0.5rem">
    <!--活动套餐-->
    <div class="mealDetail" v-for="(item,index) in localData.mealDetails">
      <p class="name">{{item.name}}</p>
      <div class="table-box" style="padding-bottom: 0">
        <table  v-show="item.name !=='基础套餐'" style="width: 100%;margin-top: 0.1rem">
          <tr class="tab-head">
            <td style="width:20%">套餐项目</td>
            <td style="width:20%" class="light">售价</td>
            <td style="width:35%" class="light">包含福利</td>
            <td style="width:25%" class="light" >适用卡</td>
          </tr>
          <tr  v-for="(item2,index2) in item.mealDetails"  :class="{bglight:(index2)%2===1}" >
            <td  style="width:20%;position: relative">
              <img style="width: 0.2rem; position:absolute;top:0.28rem;left: 0.02rem " src="../images/liping.png" alt="">
              <span  style="display: inline-block;width: 1.6rem;font-size: 0.2rem;padding-left: 0.3rem">{{item2.mealName}}</span>
            </td>
            <td  style="width:20%" class="light">{{(item2.mealPrice/100).toFixed(2)}}</td>
            <td  style="width:35%" class="light"> <span style="line-height: 0.3rem;margin-right: 0.1rem">{{item2.gameCoin ? item2.gameCoin : 0}}枚游戏币，{{item2.integral ? item2.integral : 0 }}积分，{{item2.diamonds ? item2.diamonds:0}}钻石</span></td>
            <td  style="width:25%" class="light"> <span style="line-height: 0.3rem">{{item2.cardNames}}</span></td>
          </tr>
        </table>

        <table  v-show="item.name ==='基础套餐'" style="width: 100%;margin-top: 0.1rem">
          <tr class="tab-head">
            <td style="width:25%">套餐项目</td>
            <td style="width:20%" class="light">售价</td>
            <td style="width:55%" class="light">包含福利</td>
          </tr>
          <tr  v-for="(item2,index2) in item.mealDetails"  :class="{bglight:(index2)%2===1}" >
            <td  style="width:25%;position: relative">
                <img style="width: 0.2rem; position:absolute;top:0.28rem;left: 0.02rem " src="../images/liping.png" alt="">
                <span  style="display: inline-block;width: 1.6rem;font-size: 0.2rem;padding-left: 0.3rem">{{item2.mealName}}</span>
            </td>
            <td  style="width:20%" class="light">{{(item2.mealPrice/100).toFixed(2)}}</td>
            <td  style="width:55%" class="light"> <span style="line-height: 0.3rem"> {{item2.gameCoin ? item2.gameCoin : 0}}枚游戏币，{{item2.integral ? item2.integral : 0 }}积分，{{item2.diamonds ? item2.diamonds:0}}钻石</span></td>
          </tr>
        </table>

        <p v-show=" !item.mealDetails " style="width: 100%;text-align: center;height: 0.8rem;line-height: 0.8rem">
            暂无数据
        </p>
      </div>
    </div>
  </div>
</div>
<script src="../js/echarts.common.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../common/timeCheck.js"></script>
<script src="../js/mui.min.js"></script>
<script src="../config.js"></script>
<script type="text/javascript">
  mui.init()
  var vm = new Vue({
    el: '#app',
    data: function() {
      return {
        currentShopObj:{},
        names: {
          leftName: '吧台销售额',
          rightName: false
        },
        top:'1rem',
        storeId:'',
        storeName:'',
        fromDate:'',
        toDate:'',
        actnum:'',
        dateType:'',
        chooseType: 1,  //1.销售总览 2.套餐分析 3.套餐详情   4.套餐分析下的套餐排行  5.活动权重
        chooseType2:1 ,  //1.套餐排行  2.活动权重
        chooseType3:1,   //1.销售额  2.开卡人数
//销售总览图
        lineOptions: {
          title: {
            subtext: '近30日吧台套餐销售额',
            left: 'center',
            textStyle: {
              fontSize: 14,
              fontWeight: 500
            }
          },
          tooltip: {
            trigger: 'axis',
            textStyle: {
              fontSize: 12
            },
          },
          legend: {
            itemWidth:10,
            itemHeight:10,
            bottom:10,
            data:['活动销售','套餐销售'],
          },
          feature: {
            dataView: {
              show: true,
              readOnly: false
            }
          },
          calculable: true,
          grid: {
            left: '2%',
            right: '5%',
            bottom: '14%',
            top: '20%',
            containLabel: true,
            borderColor: '#e2e2e2'
          },
          xAxis: {
            data: [],
            splitLine:{
              show:false,
            },
            axisLabel: {
//              interval:0,
              rotate:40
            },
            textStyle: {
              color: '#868686',
              fontSize: '8px'
            }
          },
          yAxis:[
            {
              name:'销售额',
              type:'value',
              max:100,
              splitLine: {
                show:true,
                lineStyle: {
                  // 使用深浅的间隔色  
                  color: ['#b1b1b1'],
                  type:'dotted'
                }
              },
            },
          ],
          series: [{
            name: '活动销售',
            type: 'bar',
            stack:'销售额',     //控制叠加柱状
            data: [60,60],
            yAxis: 1,
            itemStyle:{
              normal:{color:"#E0645D"},
            }
          },{
            name: '套餐销售',
            type: 'bar',
            stack:'销售额',
            yAxis: 1,
            data: [40,40],
            itemStyle:{
              normal:{color:"#DC9470"},
            }
          }]
        },
// 套餐排行图
        mealOptions: {
          title: {
            subtext: '吧台销售套餐排行',
            left: 'center',
            textStyle: {
              fontSize: 14,
              fontWeight: 500
            }
          },
          tooltip: {
            trigger: 'axis',
            textStyle: {
              fontSize: 12
            },
          },
          legend: {
//            itemWidth:10,
//            itemHeight:10,
            bottom:10,
            data:['套餐','人数'],
          },
          feature: {
            dataView: {
              show: true,
              readOnly: false
            }
          },
          calculable: true,
          grid: {
            left: '2%',
            right: '5%',
            bottom: '14%',
            top: '20%',
            containLabel: true,
            borderColor: '#e2e2e2'
          },
          xAxis: {
            data: [],
            splitLine:{
              show:false,
            },
            axisLabel: {
              interval:0,
              rotate:40,
              fontSize:10
            },
            textStyle: {
              color: '#ED7D31',
              fontSize: '8px'
            }
          },
          yAxis:[
            {
              name:'销售额',
              type:'value',
              max:1000000,
              splitLine: {
                show:false,
//                lineStyle: {
//                  // 使用深浅的间隔色  
//                  color: ['#4472C4'],
//                  type:'dotted'
//                }
              },
            },
            {
              name:'人数',
              type:'value',
              max:100,
              splitLine: {
                show:true,
                lineStyle: {
                  // 使用深浅的间隔色  
                  color: ['#B9B9B9'],
                  type:'dotted'
                }
              },
            }
          ],
          series: [{
            name: '套餐',
            type: 'bar',
            yAxis: 1,
            data: [40,40],
            itemStyle:{
              normal:{color:"#DC9470"},
            }
          },{
            name: '人数',
            type: 'scatter',
            yAxisIndex: 1,
            symbolSize:5,
            data: [4,4],
            itemStyle:{
              normal:{color:"#749F83"},
            }
          }]
        },
// 活动权重图
        proportionOptions:{
          title:{
            subtext:'当日活动销售额占比',
            x:'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: "{b} : {c} ",
            triggeron: 'click',
            position: [10, 10],
            textStyle: {
              fontSize: 12
            }
          },
          legend: {
            bottom:0,
            left: 'center',
            data: ['基本套餐', '销售活动'],
            itemGap: 5,
            itemWidth: 10,
            itemHeight: 10,
            textStyle: {
              fontSize: 10
            }
          },
          color: ['#DC9470', '#E0645D', ],
          series: [{
            type: 'pie',
            selectedOffset: 5,
            radius: '60%',
            center: ['50%', '50%'],
            selectedMode: 'single',
            data: [
              {
                value: 0,
                name: '基本套餐',
              },
              {
                value: 0,
                name: '销售活动'
              },
            ],
            itemStyle: {
              normal: {
                label: {
                  show: false
                }
              },
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }]
        },
        dataList:[
          {
            "saleMeal":80000,
            "actSaleMeal":0,
            "buyNumber":6,
            "saleArppu":"133.33",
            "withdrawCardNumber":0,
            "basiSalecMeal":80000,
            "date":20190126,
            "openCardNumber":3
          },
          {
            "saleMeal":1290000,
            "actSaleMeal":0,
            "buyNumber":53,
            "saleArppu":"243.40",
            "withdrawCardNumber":0,
            "basiSalecMeal":1290000,
            "date":20190125,
            "openCardNumber":17
          },
        ],   //销售总览列表
        localData:{
          "totleSaleMoney":2194700,
          "totleBuyNumber":19,
          "totleSaleNumber":25,
          "totleArppu":"1155.11",
          "cashierNumber":1,
          "basicSaleMoney":2174700,
          "basicBuyNumber":18,
          "basicSaleNumber":23,
          "basicArppu":"1208.17",
          "actSaleMoney":20000,
          "actBuyNumber":1,
          "actSaleNumber":2,
          "actArppu":"200.00",
          "openCardDeposit":1000,
          "openCardNumber":5,
          "withdrawCardNumber":4,
          "mealRanking":[],
          "mealDetails":[
            {
              "actId":-99,
              "name":"基础套餐",
              "mealDetails":[
                {
                  "dateType":3,
                  "mealName":"100元套餐",
                  "mealPrice":10000,
                  "gameCoin":112,
                  "integral":100,
                  "diamonds":0,
                  "cardNames":null,
                  "mealId":20,
                  "actId":-99
                },
                {
                  "dateType":3,
                  "mealName":"300元套餐",
                  "mealPrice":30000,
                  "gameCoin":350,
                  "integral":300,
                  "diamonds":0,
                  "cardNames":null,
                  "mealId":21,
                  "actId":-99
                },
                {
                  "dateType":3,
                  "mealName":"500元套餐",
                  "mealPrice":50000,
                  "gameCoin":610,
                  "integral":500,
                  "diamonds":0,
                  "cardNames":null,
                  "mealId":22,
                  "actId":-99
                },
                {
                  "dateType":3,
                  "mealName":"1200元套餐",
                  "mealPrice":120000,
                  "gameCoin":1560,
                  "integral":1200,
                  "diamonds":0,
                  "cardNames":null,
                  "mealId":23,
                  "actId":-99
                },
                {
                  "dateType":3,
                  "mealName":"3800元套餐",
                  "mealPrice":380000,
                  "gameCoin":5200,
                  "integral":3800,
                  "diamonds":0,
                  "cardNames":null,
                  "mealId":24,
                  "actId":-99
                }
              ]
            },
            {
              "actId":2,
              "name":"会员日超值套餐",
              "mealDetails":[
                {
                  "dateType":2,
                  "mealName":"88元(会员日专用)",
                  "mealPrice":8800,
                  "gameCoin":112,
                  "integral":100,
                  "diamonds":0,
                  "cardNames":"26,27,28",
                  "mealId":2,
                  "actId":2
                },
                {
                  "dateType":2,
                  "mealName":"100元(会员日专用)",
                  "mealPrice":10000,
                  "gameCoin":124,
                  "integral":110,
                  "diamonds":0,
                  "cardNames":"白金卡,黄金卡,白金卡",
                  "mealId":3,
                  "actId":2
                }
              ]
            },
          ],
          "mealJoinDetails":[
            {
              "actId":-99,
              "name":"基础套餐",
              "buyNumber":42996,
              "saleNumber":57158,
              "saleMoney":647980900,
              "inJoinData":[
                {
                  "buyNumber":89,
                  "mealName":"99元套餐",
                  "saleNumber":119,
                  "dateType":3,
                  "saleMoney":1178100,
                  "mealMoney":9900
                },
                {
                  "buyNumber":27,
                  "mealName":"零售",
                  "saleNumber":42,
                  "dateType":3,
                  "saleMoney":65800,
                  "mealMoney":100
                },
                {
                  "buyNumber":394,
                  "mealName":"188元套餐",
                  "saleNumber":524,
                  "dateType":3,
                  "saleMoney":6505400,
                  "mealMoney":18800
                },
                {
                  "buyNumber":4,
                  "mealName":"388元套餐",
                  "saleNumber":4,
                  "dateType":3,
                  "saleMoney":155200,
                  "mealMoney":38800
                },
                {
                  "buyNumber":3,
                  "mealName":"888元套餐",
                  "saleNumber":3,
                  "dateType":3,
                  "saleMoney":266400,
                  "mealMoney":88800
                }
              ]
            }
          ],
          "mealSaleProportion":{},
          "mealOverview":[
            {
              "saleMeal":80000,
              "actSaleMeal":0,
              "buyNumber":6,
              "saleArppu":"133.33",
              "withdrawCardNumber":0,
              "basiSalecMeal":80000,
              "date":20190126,
              "openCardNumber":3
            },
            {
              "saleMeal":1290000,
              "actSaleMeal":0,
              "buyNumber":53,
              "saleArppu":"243.40",
              "withdrawCardNumber":0,
              "basiSalecMeal":1290000,
              "date":20190125,
              "openCardNumber":17
            },
          ]
        },
        openCardOptions:{
          title: {
            subtext: '近30日吧台套餐销售额',
            left: 'center',
            textStyle: {
              fontSize: 14,
              fontWeight: 500
            }
          },
          tooltip: {
            trigger: 'axis',
            textStyle: {
              fontSize: 12
            },
          },
          legend: {
            itemWidth:10,
            itemHeight:10,
            bottom:10,
            data:['开卡人数','回流人数','退卡人数'],
          },
          feature: {
            dataView: {
              show: true,
              readOnly: false
            }
          },
          calculable: true,
          grid: {
            left: '2%',
            right: '5%',
            bottom: '14%',
            top: '20%',
            containLabel: true,
            borderColor: '#e2e2e2'
          },
          xAxis: {
            data: [],
            splitLine:{
              show:false,
            },
            axisLabel: {
//              interval:0,
              rotate:40
            },
            textStyle: {
              color: '#868686',
              fontSize: '8px'
            }
          },
          yAxis:[
            {
              name:'人数',
              type:'value',
              max:10,
              splitLine: {
                show:true,
                lineStyle: {
                  // 使用深浅的间隔色  
                  color: ['#b1b1b1'],
                  type:'dotted'
                }
              },
            }
          ],
          series: [{
            name: '开卡人数',
            type: 'bar',
//            stack:'销售额',     //控制叠加柱状
            data: [10,6],
            yAxis: 1,
            itemStyle:{
              normal:{color:"#5B9BD5"},
            }
          },{
            name: '回流人数',
            type: 'line',
//            yAxisIndex: 1,  //控制 参照哪条Y轴刻度  默认 0
            data: [4,4],
            itemStyle:{
              normal:{color:"#749F83"},
            }
          },{
            name: '退卡人数',
            type: 'line',
            data: [2,2],
            itemStyle:{
              normal:{color:"#B9B9B9"},
            }
          }]
        },
      }
    },
    created:function(){

    },
    mounted: function() {
      var vm = this;
      mui.plusReady(function() {
        vm.receiveParams();

      });
    },
    methods: {
      receiveParams: function() {
        var sf = plus.webview.currentWebview();
        this.currentShopObj = sf.currentShopObj;
        this.storeId = sf.storeId;
        this.storeName = sf.storeName;
        this.fromDate = sf.fromDate;
        this.toDate = sf.toDate;
        this.actnum = sf.actnum;
        this.dateType = sf.dateType;

      },

      initCharts: function() {
        var vm = this;
//        渲染开卡人数 or 销售金额
        if(vm.chooseType3===1){
          var lineChart = echarts.init(document.getElementById('line-chart'))
          lineChart.setOption(vm.lineOptions,true)
        }else if(vm.chooseType3===2){
          var openCardChart = echarts.init(document.getElementById('openCardChart'))
          openCardChart.setOption(vm.openCardOptions,true)
        }
//        套餐排行 or 比例
        if(vm.chooseType2===1){
          var mealRanking = echarts.init(document.getElementById('mealranking'))
          mealRanking.setOption(vm.mealOptions,true)
        }else if(vm.chooseType2===2){
          var mealProportion = echarts.init(document.getElementById('mealProportion'))
          mealProportion.setOption(vm.proportionOptions,true)
        }


      },
//      choose2:function(type){
//        if(type !== this.chooseType2){
//          this.chooseType2=type;
//          vm.initCharts()
//        }
//      },

      choose:function(type,field){
        if(type !== this[field]){
          this[field]=type;
          vm.initCharts()
        }
      },


      loadData: function() {
        var vm = this;
        var data= {
          fromDate: new Date(vm.fromDate).format('yyyyMMdd'),
            toDate: new Date(vm.toDate).format('yyyyMMdd'),
            storeId: vm.storeId,
            type:vm.dateType
        }
//        console.log(JSON.stringify(data))
        config.ajax({
          url: '/barSaleReport/getBar',
          data: {
            fromDate: new Date(vm.fromDate).format('yyyyMMdd'),
            toDate: new Date(vm.toDate).format('yyyyMMdd'),
            storeId: vm.storeId,
            type:vm.dateType
          },
          success: function(res) {
           console.log(JSON.stringify(res));
            if(res.result ===1){
             vm.localData= JSON.parse(JSON.stringify(res.data));
             vm.dataList= JSON.parse(JSON.stringify(res.data.mealOverview)) ;
             vm.dataList.forEach(function(item,index){
                item.date = vm.dateType ===0? (item.date+'').replace(/^(\d{4})(\d{2})(\d{2})$/, '$2'+'月'+'$3'+'日') :  vm.dateType ===1 ?  '第'+item.date+'周' : vm.dateType ===2 ?(item.date+'').replace(/^(\d{4})(\d{2})$/, "$1"+'年'+'$2'+'月'):'';
              });
             vm.changeMap();
             vm.getCardList();
            }else {

            }

          }
        })
      },
      changeMap:function(){
        var vm=this;
//      销售额
        vm.lineOptions.xAxis.data=[],vm.lineOptions.series[0].data=[], vm.lineOptions.series[1].data=[];
        vm.openCardOptions.xAxis.data=[],vm.openCardOptions.series[0].data=[], vm.openCardOptions.series[1].data=[], vm.openCardOptions.series[2].data=[];
        var openMax=5,outMax=5,salesMax=0,huiMax=0,peopleMax=0 ;
        vm.localData.mealOverview.forEach(function(item,index){
          var time= vm.dateType ===0? (item.date+'').replace(/^(\d{4})(\d{2})(\d{2})$/, '$3'+'日') :  vm.dateType ===1 ? item.date+'周' : vm.dateType ===2 ?(item.date+'').replace(/^(\d{4})(\d{2})$/, "$1"+'年'+'$2'+'月'):'';
          vm.lineOptions.xAxis.data.push(time);
          vm.openCardOptions.xAxis.data.push(time);
          vm.lineOptions.series[0].data.push((item.actSaleMeal/100).toFixed(2))
          vm.lineOptions.series[1].data.push((item.basiSalecMeal/100).toFixed(2))

          vm.openCardOptions.series[0].data.push(item.openCardNumber);
          vm.openCardOptions.series[2].data.push(item.withdrawCardNumber);
          vm.openCardOptions.series[1].data.push(item.buyNumber- item.openCardNumber);

          if(Number(item.openCardNumber) > openMax){
            openMax=Number(item.openCardNumber)
          }
          if(Number(item.withdrawCardNumber) > outMax){
            outMax=Number(item.withdrawCardNumber)
          }

          if( Number(item.buyNumber- item.openCardNumber) > huiMax ){
            huiMax=Number(item.buyNumber- item.withdrawCardNumber)
          }

            peopleMax= openMax > outMax ? openMax : outMax



          if(Number(item.saleMeal) >  salesMax){
            salesMax=Number(item.saleMeal)
          }
        });
        vm.lineOptions.yAxis[0].max= salesMax/100;
        vm.openCardOptions.yAxis[0].max= peopleMax > huiMax ? peopleMax : huiMax;
        vm.lineOptions.title.subtext= (vm.dateType === 0 ? '近30天' : vm.dateType ===1 ? '近12周' : '近12个月')+'吧台套餐销售额'
        vm.openCardOptions.title.subtext= (vm.dateType === 0 ? '近30天' : vm.dateType ===1 ? '近12周' : '近12个月')+'开卡人数'


//      套餐排名
        var peopleMax=0,moneyMax=0;
        vm.mealOptions.series[1].data=[],vm.mealOptions.series[0].data=[],vm.mealOptions.xAxis.data=[];
        vm.localData.mealRanking.forEach(function(item,index){
          vm.mealOptions.xAxis.data.push(item.name);
          vm.mealOptions.series[1].data.push(item.number)
          vm.mealOptions.series[0].data.push((item.money/100).toFixed(2))
          if(Number(item.number) > peopleMax){
            peopleMax=Number(item.number)
          }
          if(Number(item.money/100)>moneyMax){
            moneyMax=Number(item.money/100)
          }
        });
        vm.mealOptions.yAxis[0].max=moneyMax;
        vm.mealOptions.yAxis[1].max=peopleMax;
        if(vm.localData.mealRanking.length < 13){
          vm.mealOptions.series[0].barWidth=17;
          vm.mealOptions.series[1].barWidth=17;
        }else{
          vm.mealOptions.series[0].barWidth=10;
          vm.mealOptions.series[1].barWidth=10;
        }


//    活动权重
        vm.proportionOptions.series[0].data[0].value=((vm.localData.mealSaleProportion.basicMeal/100).toFixed(2));
        vm.proportionOptions.series[0].data[1].value=((vm.localData.mealSaleProportion.actMeal/100).toFixed(2));
        vm.initCharts();
      },
      //获取门店所以卡信息
      getCardList:function(){
        var vm=this;
        config.ajax({
          url:'/activity/getRewardCardGrade',
          data:{
            "storeId":vm.storeId,
          },
          success: function(res){
            if(res.result ===1){
              vm.localData.mealDetails.forEach(function(item,index){
                item.mealDetails.forEach(function(item2,index2){
                    if(item2.cardNames){
                      item2.cardNames=item2.cardNames.split(',');
                      var nameObj='';
                      item2.cardNames.forEach(function(item,index){
                        res.cardName.forEach(function(item2,index2){
                          if( Number(item) === Number(item2.cardGradeId) ){
                            nameObj += (item2.vipCardName+',')
                          }
                        })
                      });
                      item2.cardNames=nameObj.slice(0,nameObj.length-1)
                    }
                })
              });
            }
          },
          error:function(res){
            mui.toast(res.errormsg)
          }
        })
      },
    },
    watch: {
      fromDate: function() {
        this.loadData()
      },
    }
  })
</script>
</body>

</html>